<!DOCTYPE html>
<html>
<head>
<title>info_list.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!-- index import css start -->
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/footer.css">
<link rel="stylesheet" href="../css/resetpwd.css">
<!-- index import css end -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.list-mail ul {
	border: 1px solid #aaa;
	line-heihgt: 24px;
	padding: 6px;
	background: #ddd;
}

.list-mail li {
	cursor: pointer;
	padding: 2px 3px;
	margin-bottom: 2px;
}

.list-mail .name {
	color: #982114;
}

.list-mail .hover {
	background: #fefacf;
}

.list-mail .select {
	background: #dedaae;
}
</style>
</head>

<body>
	<!-- 这里单纯的使用一个div 没有布局成功，现在使用的是三个div，第一个和第三个只是起到布局效果 -->
	<div class="updatepwd_div">
		<div class="cotainer col-lg-4 col-md-4 col-sm-3"></div>
		<div class="cotainer col-lg-4 col-md-4 col-sm-6 col-xs-12 content_vcenter">
			<form role="form" action="" class="">
					<h4>密码</h4>
					<div class="form-group">
						<input type="text" name="" id="pwd"
						class="form-control popover-show  " placeholder="input your password">
						<span id="pwdError" class="errorTxt"></span>
					</div>
					<h4>重复密码</h4>  
					<div class="form-group">
						<input type="text" name="" id="repwd"
							class="form-control popover-show  "  placeholder="input your password again">
						<span id="repwdError" class="errorTxt"></span>
					</div>
				<button type="button" class="btn btn-primary updatepwd_btn" id="updatepwd_save_btn">保存</button>
				<button type="button" class="btn btn-primary updatepwd_btn" id="updatepwd_reset_btn">重设</button>
			</form>
		</div> 
		<div class="cotainer col-lg-4 col-md-4 col-sm-3"></div> 
	</div> 

	<script src="../js/jquery.min.js"></script>
	<script src="../js/bootstrap.min.js"></script> 
	<script> 
		$(function() { 
			// 保存
			$("#updatepwd_save_btn").click(function() {
				validatePwd();
				//validateRePwd();
			}) 
			//重设密码框获取到焦点
			$("#repwd").focus(function(){   
				$("#repwdError").text('');
			});
			//密码输入框 获取到焦点
			$("#pwd").focus(function(){ 
				$("#pwdError").text('');
			});
			//重设
			$("#updatepwd_reset_btn").click(function(){
				$('input').text('');
			})

		});
		 
		function validateRePwd(){
			var value=$("#repwd").val();//获取输入框内容
			if(!value){
				$("#repwdError").text("重复密码不能为空");
				return false;
			}
			/**
			 * 两次输入是否一致校验
			 */
			if(value!=$("#pwd").val()){
				$("#repwdError").text("两次输入的密码不一致");
				return false;
			}
			return true;
		}
		
		function validatePwd(){
			var value=$("#pwd").val();//获取输入框内容
			if(!value){
				$("#pwdError").text("密码不能为空");
			}
			/**
			 * 两次输入是否一致校验
			 */
			if(value.length<6||value.length>20){
				$("#pwdError").text("密码长度在6~20之间");
				return false;
			}
			return true;
		}
		
	</script>

</body>
</html>
